// PrettyTable.module.scss
.pretty-table {
	width: 95vw;
	height: 95vh;
	background-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute; // 使用绝对定位使元素脱离文档流
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	.highlighted 
	{
		animation: glowFadeOut 2s ease-out forwards;
	}
	  
	@keyframes glowFadeOut 
	{
		0% {
		background-color: rgba(255, 255, 0, 0.5); // Glowing color
		box-shadow: 0 0 10px rgba(255, 255, 0, 0.75); // Glowing effect
		}
		100% {
		background-color: inherit; // Fade to original background color
		box-shadow: none; // Remove the glow effect
		}
	}
	  

	@keyframes fadeInUp {
		from {
		  opacity: 0;
		  transform: translateX(-30px);
		}
		to {
		  opacity: 1;
		  transform: translateX(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeTextIn {
		from {
			opacity: 0;
			transform: translateX(20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes fadeSeachIn {
		from {
			opacity: 0;
			transform: translateX(40px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	  
	  
	&__header {
	  width: 100%;
	  height: 8%;
	  background-color: rgba(255, 255, 255, 0.2);
	  padding: 0 40px;
	  display: flex;
	  margin-left: 2%;
	  color: #0842a0;
      justify-content: flex-end; // 将内容推向最右边
      padding-right: 40px; // 保持与表格右侧的内边距一致
	  justify-content: space-between;
	  align-items: center;
	  h1 {
		margin: 0; // 移除默认的 margin
		font-size: 40px;
		padding-left: 40px; // 根据实际情况调整，使 h1 与表格对齐
		animation: fadeInUp 0.8s ease-out forwards; // 应用动画
		margin-bottom: 0.2em;
	  }
	  h1:hover {
		text-shadow: 0px 0px 2px #0842a0;
	  }
	  & .header-content { // 新增样式用于包裹标题和描述
		display: flex;
		align-items: center;
		justify-content: space-between;
	  }
  
	  & .description 
	  { // 样式用于描述文本
		
		margin-left: 20px; // 与标题的间距
		color: #743481; // 描述信息的字体颜色
		font-size: 18px; // 描述信息的字体大小
		margin-bottom: 0.3em;
		animation: fadeInUp 0.9s ease-out forwards; // 应用动画
	  }

	  & .description:hover {
		text-shadow: 0px 0px 2px #743481;
	  }

	  &__input-group {
		width: 35vw;
		height: 70%;
		margin-right: 4%;
		background-color: rgba(255, 255, 255, 0.3);
		padding: 0 20px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease-in-out;
		margin-left: auto;
		width: 35%;
		border: 2;
		animation: fadeSeachIn 0.7s ease forwards;
		// padding-right: 20%;
		&:hover {
		  width: 45%;
		  background-color: rgba(255, 255, 255, 0.5);
		  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2);
		}
  
		& img {
		  width: 25px;
		  height: 25px;
		  border-radius: 0% 10px;
		}
		& img:hover {
			background-color: rgba(255, 255, 255, 0.5);
		  	box-shadow: 0 5px 27px rgba(0, 0, 0, 0.23);
			transform: translateY(-1px); // 使按钮有点击效果
			//   0px 0px 8px rgba(0, 0, 255, 0.7)
		}
		
		& img:active {
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); // 按钮按下时的阴影效果
			transform: translateY(0.5px); // 使按钮按下时向下移动
		}
  
		& input {
		  width: 100%;
		  background-color: transparent;
		  border: none;
		  outline: none;
		}
	  }
	}
	a {
		color: #0842a0;
		font-weight: 700;
		text-decoration: none;
		transform: perspective(1px) translateZ(0);
		transition-duration: 0.2s;
		transition-property: transform;
	}
  
	&__shell {
	  width: 95%;
	  max-height: calc(90% - 25px);
	  background-color: rgba(255, 255, 255, 0.98);
	  margin: 8px auto;
	  border-radius: 10px;
	  overflow: auto;
	  height: 100%; 
	  min-height: 50vh; 
	  font-size: 18px;
	  animation: fadeIn 0.5s ease forwards;
	  
  
	  // 设置默认状态下滚动条透明
	  &::-webkit-scrollbar {
		width: 10px;
		background: transparent;
	  }
  
	  &::-webkit-scrollbar-thumb {
		background: transparent; // 默认状态下滚动条滑块透明
		border-radius: 5px;
	  }
  
	  // 仅在滚动区域:hover时显示滚动条
	  &:hover {
		&::-webkit-scrollbar-thumb {
		  background: rgba(0, 0, 0, 0.5); // 鼠标悬停时的滚动条颜色
		  transition: background-color 0.2s ease-in; // 设置背景颜色过渡时间
		}
	  }
  
	  & table {
		width: 100%;
		border-collapse: collapse;
		td {
			animation: fadeTextIn 0.7s ease forwards;
			padding: 12px 24px;
			border-left: 1px var(--table-border-color, #ccc); // 默认颜色作为后备
			border-bottom: 1px dashed var(--table-border-color, #ccc); // 默认颜色作为后备
			transition: background-color 0.3s ease-out, text-shadow 0.3s ease-out; // 添加text-shadow到transition
	
			&:hover {
			  background-color: rgba(0, 0, 255, 0.1); // 鼠标悬停时的背景颜色渐变
			  text-shadow: 0px 0px 8px rgba(0, 0, 255, 0.7); // 鼠标悬停时的字体发光
			}
		  }
	  }
  
	  & th,
	  & td {
		padding: 20px;
		padding-left: 40px;
		text-align: center;
		margin-left: 20px;
	  }
	  & thead tr
	  {
		color: #743481;
	  }
  
	  & thead th {
		position: sticky;
		top: 0;
		background-color: #d5d1de;
		// border-color: ;
		cursor: pointer;
		z-index: 10;
		padding: 24px 24px;
		border-left: 1px solid  var(--table-border-color, #ccc); // 默认颜色作为后备
		border-bottom: 1px solid var(--table-border-color, #ccc); 
		transition: background-color 0.3s ease-out, text-shadow 0.3s ease-out; // 添加text-shadow到transition
		
		&:hover {
			// background-color: rgba(0, 0, 255, 0.1); // 鼠标悬停时的背景颜色渐变
			text-shadow: 0px 0px 8px rgba(0, 0, 255, 0.7); // 鼠标悬停时的字体发光
		}
	  }
  
	  & tbody tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.04);
	  }
  
	  & tbody tr:hover {
		background-color: rgba(255, 255, 255, 0.6) !important;
	  }
  
	  & .button {
		display: inline-block;
		padding: 8px 10px;
		border-radius: 14px;
		text-align: center;
		cursor: pointer;
		font-weight: 600; 
		transition: background-color 0.3s ease;
		background: linear-gradient(45deg, #84fab0 30%, #8fd3f4 90%); 
		color: #2c3e50; // 按钮文字颜色
		border: none; // 移除边框
		// margin: 4px; // 添加一些外边距以避免按钮之间紧贴
		outline: none; // 焦点时移除轮廓
		box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); // 细微的阴影效果
  
		&:nth-child(4n) {
		  background-color: #86e49d;
		  color: #006b21;
		}
  
		&:nth-child(4n-1) {
		  background-color: #ebc474;
		}
  
		&:nth-child(4n+1) {
		  background-color: #beabb0;
		  color: #0842a0;
		}
  
		&:nth-child(4n+2) {
		  background-color: #6fcaea;
		}
		&:hover {
			box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); // 鼠标悬浮时增加阴影效果
			transform: translateY(-1px); // 使按钮有点击效果
		  }
		
		  &:active {
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); // 按钮按下时的阴影效果
			transform: translateY(0.5px); // 使按钮按下时向下移动
		  }
	  }
	}
  }
  